<template>
  <div class="jiaban">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
      <el-form-item label="部门：" prop="departmentId">
        <el-select v-model="ruleForm.departmentId" placeholder="部门" @change="changDept">
          <el-option v-for="item in dlist.lists" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="加班规则：">
        <el-row v-for=" item in ruleForm.extraDutyRuleList" :key="item.id">
          <el-col :span="10">
            <el-switch
              v-model="item.isEnable"
              :active-text="item.rule"
              :active-value="1"
              :inactive-value="0"
            />
          </el-col>
          <el-col :span="3">
            <el-checkbox v-model="item.isTimeOff" label="调休假" :true-label="1" :false-label="0" />
          </el-col>
          <el-col :span="5">
            <el-time-picker v-model="item.ruleStartTime" placeholder="选择时间" style="width:120px" value-format="HH:mm:ss" />
          </el-col>
          <el-col :span="5">
            <el-time-picker v-model="item.ruleEndTime" placeholder="选择时间" style="width:120px" value-format="HH:mm:ss" />
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="10">
            <el-switch
              v-model="value"
              active-text="法定节假日可申请加班"
            />
          </el-col>
          <el-col :span="3">
            <el-checkbox label="调休假" />
          </el-col>
          <el-col :span="5">
            <el-time-picker v-model="form.date2" placeholder="选择时间" style="width:120px" />
          </el-col>
          <el-col :span="5">
            <el-time-picker v-model="form.date2" placeholder="选择时间" style="width:120px" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-switch
              v-model="value"
              active-text="法定节假日可申请加班"
            />
          </el-col>
          <el-col :span="3">
            <el-checkbox label="调休假" />
          </el-col>
          <el-col :span="5">
            <el-time-picker v-model="form.date2" placeholder="选择时间" style="width:120px" />
          </el-col>
          <el-col :span="5">
            <el-time-picker v-model="form.date2" placeholder="选择时间" style="width:120px" />
          </el-col>
        </el-row> -->
      </el-form-item>

      <el-form-item label="打卡验证：">
        <el-switch
          v-model="ruleForm.extraDutyConfig.isClock"
          active-text="加班需要有打卡记录"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
      <el-form-item label="开启补偿：">
        <el-switch
          v-model="ruleForm.extraDutyConfig.isCompensationint"
          :active-value="'1'"
          :inactive-value="'0'"
        />
      </el-form-item>

      <el-form-item label="调休假设置：">
        <el-row>
          <el-col>
            最晚有效期： 次年
            <el-date-picker v-model="ruleForm.dayOffConfigs.latestEffectDate" type="date" placeholder="选择日期" format="MM-dd" value-format="MM-dd" />
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            请假最小单位
            <el-input v-model="ruleForm.dayOffConfigs.unit" style="width: 50px;" />
            天
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item style="text-align: center;">
        <el-button type="primary" @click="submitForm()">保存更新</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getExtDutyItem, saveExtDutyItem } from '@/api/attendance'
import { Message } from 'element-ui'
export default {
  inject: ['dlist'],
  data() {
    return {
      value: false,
      form: {
        name: ''
      },
      ruleForm: {
        departmentId: 0,
        extraDutyConfig: {
          isClock: 0,
          isCompensationint: 0
        },
        dayOffConfigs: {
          latestEffectDate: '',
          unit: ''
        }
      },
      rules: {
        departmentId: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ]
      }

    }
  },
  created() {
    this.ruleForm.departmentId = this.dlist.lists[0].id
    this.load()
  },
  methods: {
    async load(id) {
      if (id) {
        this.ruleForm.departmentId = id
      }
      // console.log('qingjiaLoadding')
      const res = await getExtDutyItem({ departmentId: this.ruleForm.departmentId })
      this.ruleForm.dayOffConfigs = res.dayOffConfigs
      this.ruleForm.extraDutyConfig = res.extraDutyConfig
      this.ruleForm.extraDutyRuleList = res.extraDutyRuleList

      console.log('加班 - load', res)
    },
    changDept(id) {
      this.ruleForm.departmentId = id
      console.log(id)
      this.load()
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    async submitForm() {
      console.log(this.ruleForm)

      const newData = { departmentId: this.ruleForm.departmentId,
        isClock: this.ruleForm.extraDutyConfig.isClock,
        isCompensationint: this.ruleForm.extraDutyConfig.isCompensationint,
        latestEffectDate: this.ruleForm.dayOffConfigs.latestEffectDate,
        unit: this.ruleForm.dayOffConfigs.unit,
        rules: this.ruleForm.extraDutyRuleList
      }

      console.log(newData)

      const res = await saveExtDutyItem(newData)
      console.log('加班 - save', res)
      Message.success('保存成功')
      this.closeDialog()
    }

  }
}
</script>

<style>
.el-row{
  margin-bottom: 10px;
}
</style>
